//防抖
function debounce(func, wait, immdediate) {
    let result = null,
        timeout = null;
    return function (...arg) {
        //debounce里的this是func里要用到的 所以先存起来
        //跟bind预处理类似
        let context = this,
            now = immdediate && !timeout;
        //只有设置了立即执行,且没外另外的延时器在执行时才为true
        clearTimeout(timeout); //=>重要:在设置新的定时器之前,我们要把之前设置的定时器都干掉,因为防抖的目的是等待时间内,只执行一次
        timeout = setTimeout(() => {
            //如果设置了立即执行,就不在定时器里延时执行了
            if (!immdediate) result = func.call(context, ...arg);
            clearTimeout(timeout);
            timeout = null;
        }, wait)
        //相对上面,now为true则不走定时器,直接执行func
        if (now) result = func.call(context, ...arg);
        return result;
    }
}


//search
$(function () {
    //搜索框聚焦显示热点,失去焦点隐藏热点
    $('.text').on('focus', function () {
        $('.hots').css('display', 'block')
    })
    //用blur做不到
    $('.hots>dl').on('click', 'DD', function (e) {
        let $target = $(e.target);
        $('.text').val($target.text());
        $('.hots').css('display', 'none')
    });
    $(document).on('click', function (e) {
        //点击的时候不是.text
        //且点击的目标元素节点名不是 'DD'
        //因为DD需要被点击到,隐藏hots就点击不到了
        if (!($(e.target).prop("className") === 'text') && !($(e.target).prop("tagName") === 'DD')) {
            $('.text').val('');
            $('.hots').css('display', 'none');
        }
    })
});



// banner
$(function () {
    let count = 0;
    let $lilist = $('.bannercon>ul>li');
    let spanIndex = 0;
    //播放方法
    function autoPlay(num) {
        $lilist.css('opacity', 0).eq(num).animate({
            'opacity': 1
        }, 300, function () {
            // console.log(this);
        });
        $('.spannav>span').eq(num).css('background', 'black').siblings().css('background', 'none');
    };
    //页面已加载就进行轮播
    autoPlay(count);
    let timer = setInterval(function () {
        count++;
        if (count > 5) count = 0;
        autoPlay(count)
    }, 2000);

    //左右按钮点击切换
    $('.btnr').on('click', function () {
        count++;
        if (count > 5) count = 0;
        autoPlay(count);
    }).on('mouseover', function () {
        //移入清除轮播定时器
        clearInterval(timer);
    }).on('mouseout', function () {
        timer = setInterval(function () {
            count++;
            if (count > 5) count = 0;
            autoPlay(count)
        }, 2000);
    });
    $('.btnl').on('click', function () {
        count--;
        if (count < 0) count = 5;
        autoPlay(count);
    }).on('mouseover', function () {
        //移入清除轮播定时器
        clearInterval(timer);
    }).on('mouseout', function () {
        timer = setInterval(function () {
            count++;
            if (count > 5) count = 0;
            autoPlay(count)
        }, 2000);
    });

    //spannav移入切换
    $('.spannav>span').on('mouseover', function (e) {
        let $this = $(this);
        spanIndex = $this.index();
        //将index值赋给count 
        //鼠标移出时重设定时器时依旧用count值
        count = spanIndex;
        //移入清除轮播定时器
        clearInterval(timer);
        autoPlay(spanIndex);
        $this.css('background', 'black').siblings().css('background', 'none');
    }).on('mouseout', function () {
        timer = setInterval(function () {
            count++;
            if (count > 5) count = 0;
            autoPlay(count)
        }, 2000);
    })


});


//fixnav 固定导航栏(包括回到顶部及楼层)
$(function () {
    let flag = true;

    $(window).on('scroll', debounce(function () {
        let $this = $(this);
        let cilentH = $(window).height();
        if ($this.scrollTop() > cilentH && flag === true) {
            $('.fixnav').append(`<div class="shop gotop">
                                    <i class="iconfont">&#xe76c;</i>
                                    <p>回到顶部</p>
                                 </div>`).prepend(`<ul class="floornav">
                                 <li>手机</li>
                                 <li>笔记本电脑</li>
                                 <li>精品平板</li>
                                 <li>智能穿戴</li>
                                 <li>智慧屏</li>
                                 <li>智能家居</li>
                                 <li>热销配件</li>
                             </ul>`);
            $('.gotop').on('click', function () {
                //点击移除楼层 移除回到顶部
                $('.fixnav').find($('.gotop')).remove();
                $('.fixnav').find($('.floornav')).remove();
                $("html,body").stop().animate({
                    scrollTop: 0
                });
                return false;
            });
            $('.fixnav').on('click', $('li'), function (e) {
                if (e.target.nodeName === 'LI') {
                    $("html,body").stop().animate({
                        scrollTop: 850 + $(e.target).index() * 680
                    }, function () {
                        // $(e.target).addClass('current').siblings().removeClass('current');
                    })
                }
            });
            flag = false;
        }
        if ($this.scrollTop() <= cilentH) {
            $('.fixnav').find($('.gotop')).remove();
            $('.fixnav').find($('.floornav')).remove();
            flag = true;
        }
    }, 100, true));

})

//点击购物车跳转到购物车
$(function () {
    $('.fixnav>.shop').eq(0).on('click', function () {
        location = './shopcart.html';
        // location = './shopcart.html';
    });
})

//商品跳转
$(function () {
    $('.floor>ul>li').on('click', function () {
        location = './product.html';
    });
});


//如果登录过显示用户名
$(function () {
    let $ul = $('.hr>ul');
    let $signedin = $('.signedin');
    if (window.localStorage.userinfo) {
        let username = JSON.parse(window.localStorage.userinfo)[0].u_name;
        $signedin.remove();
        $ul.prepend(`
        <li class="quit">
            <a href="javascript:;">${username} </a>
            <a href="javascript:;"> 退出</a>
        </li>
        `);
        $('.quit').children().eq(1).on('click', function () {
            layer.msg('已退出登录');
            localStorage.removeItem('userinfo');
            $(this).parent().parent().prepend(`
            <li class="signedin">
                <a href="./login.html">请登录 </a>
                <a href="./register.html"> 注册</a>
            </li>
            `);
            $(this).parent().remove();
            console.log($(this).parent().parent());
        })
    };
})